/**
 * Created with Vim7.3 Mac
 * @fileOverview : 
 * @author : Lyle lylechen2014@gmail.com
 * @since : 2016-09-30 09:32:18
 * @filename : src/components/card.js
 * @version : 
 * @description : 
 */

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    Animated,
    Easing,
    TouchableOpacity
} from 'react-native';

import NetWorkImg from '../common/networkImg'
import Gesture from '../common/gesture'

class Card extends Component {

    constructor(props) {
        super(props);
        this.state = {
            card: this.props.card,
            index: this.props.index,
            xy: new Animated.ValueXY({x:0,y:0}),
        };
    }

    componentWillMount(){
        
        let opt = {
            priority: true,
            responder: ()=>{return true},
            swipeMove: (e)=>{
                console.log(e,'move');
                this.moveCard(e);
            },
            swipeLeft: (e)=>{
                console.log('swipeLeft');
                this.swipeLeft(e);
            },
            swipeRight: (e)=>{
                console.log('swipeRight');
                this.swipeRight(e);
            },
            swipeUp: (e)=>{
                console.log('swipeUp');
                this.swipeEnd(e);
            },
            swipeDown: (e)=>{
                console.log('swipeDown');
                this.swipeEnd(e);
            },
            swipeEnd: (e)=>{
                console.log(e,'swipeEnd');
                this.swipeEnd(e);
            },
        };
        this._gestureHandlers  = new Gesture(opt);
        
    }
    
    componentWillReceiveProps(nextProps) {
        this.setState({  
            index : nextProps.index
        });
    }

    animationFunc(start,end,time,callback) {
        Animated.timing(start, {
            toValue: end,
            duration:time,
            delay:0,
        }).start(callback ? callback : null);
    }

    animationSpringFunc(start,end) {
         Animated.spring(start, {
            toValue: end,
            friction:5,
            tension:40,
        }).start();
    }

    moveCard(touch) {    
        let mx = touch.x2 - touch.x1; 
        let my = touch.y2 - touch.y1;
        this.animationFunc(this.state.xy,{y:my,x:mx},0)
    }

    swipeLeft(touch) {
        this.swipeGoto(touch);
    }

    swipeRight(touch) {
        this.swipeGoto(touch);
    }

    swipeGoto(touch) { 
        let tthis = this,
            mx = touch.x2 - touch.x1, 
            my = touch.y2 - touch.y1, 
            zmx = 6 * mx,
            zmy = 6 * my;

        //this.state.xy.setValue({x:mx,y:my});
        //console.log(108,this.state.xy,mx,my);
        
        this.animationFunc(this.state.xy,{y:zmy,x:zmx},300,function(){
              //this.refs.menuView.setNativeProps({style:{marginLeft:num}});
              tthis.props.removeCards();
        });
         
    }
    
    swipeEnd(touch) {
    	this.animationSpringFunc(this.state.xy,{y:0,x:0})
    }

    render() {

        //console.log(124,this.state.index,this.state.card.picture);

        let transform,arr = [
            [],
            [{scale: 0.95},{translateY:20}],
            [{scale: 0.90},{translateY:40}]
        ];

        if (this.state.index < 2) {
            transform = arr[this.props.index].concat(this.state.xy.getTranslateTransform());
        } else {
            transform = arr[2].concat(this.state.xy.getTranslateTransform());
        }

        return (
            <Animated.View  style={[styles.items,{transform:transform}]} {...this._gestureHandlers}>  
                <NetWorkImg                                 
                    source={{uri:this.state.card.picture}}
                    style={styles.cardSize}
                    loadSize={'large'}
                />
                <View style={styles.cardDes}>
                    <View style={styles.cardDesline}>
                        <Text style={styles.cardDesText}> 18 Man </Text>
                    </View>
                    <Text style={styles.cardDesText}> New York, NY </Text>
                </View>
            </Animated.View>
        )
    }
}

const styles = StyleSheet.create({

	items: {
        position:'absolute',
        backgroundColor:'#fff',
        width:300,
        height:480,
        borderColor:'#999',
        borderWidth:0.5,
        borderRadius:5,
    },

    cardSize: {
        width:300,
        height:380,
        borderColor:'#ccc',
        borderWidth:0.5,
        justifyContent: 'center',
        alignItems:'center',
        borderRadius:5,
    },

    cardDes: {
        width:300,
        height:100,
        justifyContent: 'center',
        alignItems:'center',
    },

    cardDesText: {
        fontSize:16,
        color:'#666',
        height:40,
        lineHeight:30,
    },

    cardDesline: {
        width:250,
        borderColor:'#ccc',
        borderBottomWidth:0.5,
        justifyContent: 'center',
        alignItems:'center',
    },

});

export default Card;